<template>
	<view>
		<image src="../../static/userBg2.png" style="width:100%;position: absolute;height:300rpx"></image>
		<view class="user-box w94 flex-between" @click="to('/pages/user/syset')">
			<view class="flex-start items-center" style="z-index: 99;">
				<view>
					<image src="../../static/uview/common/logo.png" class="head-img"></image>
				</view>
				<view style="margin-left: 14rpx;">
					<view style="font-size: 36rpx;font-weight: bold;color:#000;">用户9527686</view>
					<view style="font-size: 28rpx;color:#323232;">ID:9527</view>
				</view>
			</view>
			<view>
				<u-icon name="arrow-right" color="#000" size="28"></u-icon>
			</view>
		</view>

		<view style="z-index: 99;position: relative;width:100%;">
			<view class="flex-between" style="padding:20rpx;">
				<u-grid :col="4" :border="false">
					<u-grid-item :customStyle="{'padding':'20rpx 0rpx'}" bgColor="transparent" @click="to('/pages/user/coupon')">
						<view style="font-weight: bold;font-size: 42rpx;">1</view>
						<view class="grid-text">优惠券</view>
					</u-grid-item>
					<u-grid-item :customStyle="{'padding':'20rpx 0rpx'}" bgColor="transparent">
						<view style="font-weight: bold;font-size: 42rpx;">0</view>
						<view class="grid-text">权益卡</view>
					</u-grid-item>
					<u-grid-item :customStyle="{'padding':'20rpx 0rpx'}" bgColor="transparent">
						<view style="font-weight: bold;font-size: 42rpx;">0</view>
						<view class="grid-text">保修卡</view>
					</u-grid-item>
					<u-grid-item :customStyle="{'padding':'20rpx 0rpx'}" bgColor="transparent">
						<view style="font-weight: bold;font-size: 42rpx;">0</view>
						<view class="grid-text">收据</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<view @click="to('/pages/user/vip')" style="z-index: 99;background: #eedfc0;border-radius: 20rpx;padding:20rpx 20rpx;"
			class="w94 radius20 flex-between">
			<u-icon name="integral-fill" color="#462d19" size="30" label="金卡 全年最高可省￥864元" label-color="#462d19">
			</u-icon>
			<view style="padding:6rpx 20rpx;background: #462d19;color:#eedfc0;text-align: center;" class="radius20">立即查看
			</view>
		</view>

		<view class="w94 radius20 bgwhite" style="z-index: 99;margin-top: 20rpx;">
			<view class="w96 flex-between" style="padding-top:20rpx">
				<label style="font-weight: bold;font-size: 32rpx;">我的订单</label>
				<u-icon name="arrow-right" label="全部订单" label-pos="left" color="#6a6a6a" label-color="#6a6a6a" size="24"
					label-size="24"></u-icon>
			</view>
			<view class="flex-between" style="padding:20rpx;">
				<u-grid :col="4" :border="false">
					<u-grid-item :customStyle="{'padding':'20rpx 0rpx'}" v-for="(item,index) in gridList1"
						@click="to(item.path)">
						<u-icon :name="item.icon" :size="50"></u-icon>
						<view class="grid-text">{{item.text}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<view class="w94 radius20 bgwhite" style="z-index: 99;margin-top: 20rpx;">
			<view class="w96 flex-between" style="padding-top:20rpx">
				<label style="font-weight: bold;font-size: 32rpx;">服务与工具</label>
				<!-- 	<u-icon name="arrow-right" label="全部订单" label-pos="left" color="#6a6a6a" label-color="#6a6a6a" size="24"
					label-size="24"></u-icon> -->
			</view>
			<view class="flex-between" style="padding:20rpx;">
				<u-grid :col="4" :border="false">
					<u-grid-item :customStyle="{'padding':'20rpx 0rpx'}" v-for="(item,index) in gridList2"
						@click="to(item.path)">
						<u-icon :name="item.icon" :size="50" color="#2e80fe"></u-icon>
						<view class="grid-text">{{item.text}}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>


		<view class="w96 mt20 radius20 flex-between" style="padding:10rpx 0rpx;">
			<view class="sm-item flex-center">
				<view class="sm-item-title sm_cur">家电清洗</view>
				<view class="sm-item-tips  sm_cur">保修30天</view>
			</view>
			<view class="sm-item flex-center">
				<view class="sm-item-title">家电维修</view>
				<view class="sm-item-tips">保修90天</view>
			</view>
			<view class="sm-item flex-center">
				<view class="sm-item-title">管道疏通</view>
				<view class="sm-item-tips">标准报价</view>
			</view>
			<view class="sm-item flex-center">
				<view class="sm-item-title">水电维修</view>
				<view class="sm-item-tips">保修30天</view>
			</view>
		</view>


		<view class="w94 mt20 radius20">
			<view class="flex-start mt20 radius20 bgwhite" style="width:100%;padding:20rpx 10rpx;"
				v-for="(item,index) in 6">
				<view style="margin-right: 20rpx;">
					<image src="http://n1.itc.cn/img8/wb/recom/2016/06/24/146674347901435567.PNG"
						style="width:180rpx;height: 180rpx;" class="radius20"></image>
				</view>
				<view class="flex-between"
					style="flex-direction: column;height: 180rpx;align-items: flex-start;width: 70%;">
					<view style="font-weight: bold;font-size: 30rpx;">油烟机清洗</view>
					<view style="font-size: 24rpx;color:#999;">【强力去油污】告别油垢顽渍</view>
					<view class="flex-between" style="margin-right: 20rpx;width:100%;">
						<view style="color:red;">
							<label style="font-size: 24rpx;">￥</label>
							<label style="font-size: 34rpx;font-weight: bold;">198.00</label>
							<label style="font-size: 24rpx;font-family: 宋体;">/次</label>
						</view>
						<view>
							<u-tag type="primary" text="立即预约" mode="dark" shape="circle" bg-color="#2979ff"></u-tag>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view style="width:100%;height: 100rpx;">
		</view>

		<u-popup v-model="showPhone" @close="showPhone=false" border-radius="10" mode="bottom" :customStyle="{'width':'100%'}">
			<view class="w94">
				<u-cell-group>
					<u-cell-item :border="false" :arrow="false" :title="'客服'+(index+1)"
						:label="item" @click="openPhone(item)" v-for="(item,index) in phones"
						:key="index">
						<!-- <u-icon slot="icon" size="40" name="account-fill"></u-icon> -->
						<u-icon slot="right-icon" size="32" name="phone-fill"></u-icon>
					</u-cell-item>
				</u-cell-group>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPhone: false,
				phones: ['13570513190', '18890262450'],
				gridList1: [{
						icon: '/static/order/order1.png',
						text: '待接单',
						path: '/pages/order/list'
					},
					{
						icon: '/static/order/order2.png',
						text: '待上门',
						path: '/pages/order/list'
					},
					{
						icon: '/static/order/order3.png',
						text: '待评价',
						path: '/pages/order/list'
					},
					{
						icon: '/static/order/order4.png',
						text: '返修',
						path: '/pages/order/list'
					}
				],
				gridList2: [{
						icon: 'map',
						text: '地址管理',
						path: '/pages/user/address/list'
					},
					{
						icon: 'kefu-ermai',
						text: '我的客服',
						path: 'showPhone'
					},
					{
						icon: 'setting',
						text: '系统设置',
						path: '/pages/user/syset'
					}
				]
			}
		},
		computed: {

		},
		methods: {
			to(url) {
				if (url.indexOf('/pages/') <= -1) {
					if (url == 'showPhone') {
						this.showPhone = true;
						console.log('showPhone',this.showPhone)
					}
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			openPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone, //电话号码
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);

					}
				})
			},
		}
	}
</script>

<style>
	.user-box {
		/* #ifdef H5*/
		padding-top: 50rpx;
		/*#endif*/
		/* #ifndef H5*/
		padding-top: 100rpx;
		/*#endif*/

	}

	.head-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}

	.grid-text {
		font-size: 24rpx;
		margin-top: 12rpx;
		color: #000;
	}


	.sm-item {
		width: 25%;
		flex-direction: column;
	}

	.sm-item-title {
		font-weight: bold;
		font-size: 32rpx;
		color: #000;
	}

	.sm-item-tips {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.sm_cur {
		color: #2d80fd
	}
</style>
